<script setup lang="ts">
// import pc from './pc.vue'
import router from '@/router'
import { ref } from 'vue'
let w = ref(1920)
let h = ref(1080)

const loginQuery = ref({
  username: 'admin',
  password: '1235654',
  code: '8s6s',
  checked: true
})

const handleLogin = () => { 
  // TODO: 控制 用户名 密码 验证码 不能为空 才能够提交登录 
  // 还要经过后端接口确认用户存在 密码正确 验证码正确 返回200 说明登录成功,才能真正跳转
  router.push('/home')
 }
</script>

<template>
  <!--  -->
  <!-- <pc :width="w" :height="h">
      大王叫我来巡山
    </pc> -->
  <div class="main">
    <div class="header">
      欢迎登录智慧产业园区一体化综合指挥平台
    </div>
    <div class="welcome">
      WELCOME TO THE SYSTEM
    </div>
    <div class="login-box">
      <!-- 用户名输入框 -->
      <a-input placeholder="请输入用户名" v-model:value="loginQuery.username" class="skew-input" size="large">
        <!-- 输入框前缀标签 -->
        <template #prefix>
          <div class="input-before">用户名</div>
        </template>
      </a-input>

      <a-input-password placeholder="请输入密码" v-model:value="loginQuery.password" class="skew-input" size="large">
        <!-- 输入框前缀标签 -->
        <template #prefix>
          <div class="input-before">密码</div>
        </template>
      </a-input-password>

      <!-- 验证码区域 -->
      <div class="code-container">
        <a-input placeholder="请输入验证码" v-model:value="loginQuery.code" class="skew-input code-input" size="large">
          <!-- 输入框前缀标签 -->
          <template #prefix>
            <div class="input-before">验证码</div>
          </template>
        </a-input>
        <!-- 验证码图片展示区域 -->
        <div class="code-image">
          1234
        </div>
      </div>

      <a-checkbox v-model:checked="loginQuery.checked" class="checkbox">记住密码</a-checkbox>

      <!-- 登录按钮 两个按钮 水平排列, 需要在两个按钮的外面套一个div 给这个div display: flex ,第一个按钮 flex:1, 第二个按钮flex: 2-->
      <div class="login-btn" >
        <a-button type="primary" class="skew-button first-btn" @click="handleLogin" size="large" block>Enter</a-button>
        <a-button type="primary" class="skew-button second-btn" @click="handleLogin" size="large" block>Enter</a-button>
      </div>
    </div>
  </div>
</template>

<style>
body {
  /* 清除浏览器默认的内外边距 */
  margin: 0;
  padding: 0;

  width: 100%;
  /* view height */
  height: 100vh;
  /* 溢出部分: 隐藏 */
  overflow: hidden;
}
</style>
<!-- npm install sass sass-loader --save-dev -->
<style lang="scss" scoped>
// 自定义字体
@font-face {
  font-family: MySummerFont;
  // 字体文件路径
  src: url('@/assets/font/TaoBaoMaiCaiTi-Regular/TaoBaoMaiCaiTi-Regular.ttf') format('truetype');
  font-weight: bold;
}

.main {
  width: 100%;
  min-height: 100vh;
  // background-color: red;
  background: url("@/assets/image/bg/bg.jpg") no-repeat center center;
  background-size: 100% 100%;
  // 讲main盒子设置为弹性盒子
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // 修改盒模型计算方式
  box-sizing: border-box;

  .header {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: bold;
    background: linear-gradient(to bottom, #abd5ff, #5ba9f8);
    // 将背景裁剪到文字上
    background-clip: text;
    // 兼容Safari内核的浏览器
    -webkit-background-clip: text;
    // 让文字透明化(而背景又是渐变的,所以眼睛看上去字的颜色是渐变的)
    -webkit-text-fill-color: transparent;
    // 让文本居中
    text-align: center;
    // 给蚊子添加阴影
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-family: MySummerFont;
    margin-bottom: 10px;
  }

  .welcome {
    color: #5ba9f8;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    // 设置响应式字体大小
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
  }

  .login-box {
    width: 100%;
    // 最大宽度
    max-width: 420px;
    // 最小宽度
    min-width: 300px;
    // height: 300px;
    padding: 100px 30px 30px;
    border-radius: 10px;
    background-color: red;
    background: url('@/assets/image/bg/bg2.png') no-repeat center center;
    background-size: 100% 100%;
    // 阴影效果
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    // 背景模糊效果
    backdrop-filter: blur(2px);

    // 将login=box设置为弹性盒子
    display: flex;
    // 垂直排列
    flex-direction: column;
    // 控制子元素间距
    gap: 20px;
    justify-content: center;
    align-items: center;

    /* 输入框前缀标签样式 */
    .input-before {
      width: 80px;
      /* 固定宽度 */
      color: #fff;
      /* 文字颜色 */
      font-weight: 500;
      /* 字重 */
    }

    .skew-input {
      clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
      /* 裁剪成平行四边形 */
      border-radius: 0;
      /* 去除圆角 */
      border: none;
      /* 去除边框 */
      border-bottom: 1px solid #5ba9f8;
      /* 底部边框 */
      background: linear-gradient(to right, rgba(74, 154, 243, 0.8), rgba(255, 255, 255, 0.5));
      /* 渐变背景 */
      padding-left: 30px;
      /* 左内边距 */
    }

    /* 深度选择器修改Ant Design输入框内部样式 */
    :deep(.ant-input-affix-wrapper>input.ant-input) {
      background-color: transparent !important;
      /* 透明背景 */
      color: #fff;
      /* 文字颜色 */
    }

    /* 输入框占位符样式 */
    :deep(.ant-input::placeholder) {
      color: rgba(255, 255, 255, 0.7);
      /* 半透明白色 */
    }

    // 验证码样式
    .code-container {
      width: 80%;
      // height: 30px;
      // background-color: red;
      display: flex;
      gap: 20px;

      .code-input {
        // 让输入框 占据这一行剩余的空间
        flex: 1;
      }

      .code-image {
        width: 100px;
        background-color: rgba(255, 255, 255, 0.2);

        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: bold;
        // 控制每一个字之间的间距 ⬇️
        letter-spacing: 4px;
        // 鼠标样式 ⬇️
        cursor: pointer;
        clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
      }
    }

    // 记住密码样式
    .checkbox {
      color: #fff;
      // background-color: red;
      width: 80%;
    }

    .login-btn {
      width: 80%;
      // background-color: red;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1px;

      .first-btn {
        flex: 1;
      }
      .second-btn {
        flex: 2;
      }
    }

    // 登录按钮样式
    .skew-button {
      clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
      /* 平行四边形裁剪 */
      border-radius: 0;
      /* 去除圆角 */
      overflow: hidden;
      /* 隐藏溢出 */
      height: 40px;
      /* 固定高度 */
      font-weight: bold;
      /* 加粗 */
      margin-top: 10px;
      /* 上边距 */
      background: linear-gradient(to right, #1890ff, #5ba9f8);
      /* 渐变背景 */
      border: none;
      /* 去除边框 */
    }

    /* 按钮悬停状态 */
    .skew-button:hover {
      background: linear-gradient(to right, #40a9ff, #7bbcf8);
      /* 更亮的渐变 */
    }

  }
}
</style>